<template>
    <div class="box6">
        <div class="title">
            <p> 热门景区排行</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>

        <div class="charts" ref="charts">

        </div>
    </div>
</template>

<script setup lang='ts' name='Rank'>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

let charts = ref();
onMounted(() => {
    let mychart = echarts.init(charts.value)
    mychart.setOption({

        title: {
            text: '热门景区排行',
            left: '40%',
            textStyle: {
                color: 'skyblue',
                fontSize: 20,
            },
            // 子标题
            subtext: '各大景区',
            subtextStyle: {
                color: 'white',
                fontSize: 15,
            },
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {

        },
        grid: {
            left: 20,
            right: 0,
            top: 30,
            bottom: 20,
        },
        series: [
            {
                type: 'bar',
                data: [10, 20, 30, 40, 50, 60, 90],
                label: {
                    show: true,
                    // 文字位置
                    position: 'insideTop',
                    // color: 'white',
                    // fontSize: 15,
                },
                // 是否显示背景颜色
                showBackground: true,
                backgroundStyle: {
                    /// 背景颜色
                    color: 'rgba(0, 0, 0, 0.5)',


                },
                /// 柱条样式
                itemStyle: {
                    // 圆角
                    borderRadius: 20,
                    /// 逐条颜色
                    color: (params: any) => {
                        let colorList = ['#FF0000', '#FF7F00', '#FFFF00', '#7FFF00', '#00FF00', '#00FF7F', '#00FFFF'];
                        return colorList[params.dataIndex]
                    }
                }
            }, {
                type: 'line',
                data: [10, 20, 30, 40, 50, 60, 90],

            }
        ]
    })
})

</script>

<style scoped lang='scss'>
.box6 {
    width: 100%;
    height: 100%;
    background: url('../../images/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    margin: 20px 0;

    .title {
        margin-left: 20px;

        p {
            color: white;
            font-size: 20px;
        }
    }

    .charts {
        height: calc(100% - 40px);
    }


}
</style>